<template>
    <q-page>
        <q-card>
            <q-item class='full-width q-pa-md'>
                <q-item-side :avatar="this.account.avatar" />
                <q-item-main>
                    <q-item-tile label>
                        {{this.account.name}} {{this.account.douyinid}}
                    </q-item-tile>
                    <div class="q-mt-sm">
                        <q-chip class="q-mr-xs" dense>作品：{{formatNumbers(this.account.videoCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>获赞：{{formatNumbers(this.account.upAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>粉丝：{{formatNumbers(this.account.fanCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>评论：{{formatNumbers(this.account.commentAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>转发：{{formatNumbers(this.account.shareAva)}}</q-chip>
                    </div>
                </q-item-main>

                <!-- <q-item-side right :class="this.isMobile ? 'filterFavor' : ''">
                    <q-toggle
                        v-model="showFavored"
                        checked-icon="check"
                        color="primary"
                        label="只看收藏"
                        dense
                        @input="filterOnlyFavored"
                    />
                </q-item-side> -->
            </q-item>
        </q-card>
        <q-infinite-scroll :handler="loadMoreVideos" ref="scroll">
            <q-list separator>
                <video-item 
                    v-for="(item,idx) in this.list" 
                    :key="item.vid + idx"
                    :item="item" 
                    position="account"/>
            </q-list>
        </q-infinite-scroll>
    </q-page>
</template>

<script>
import VideoItem from './VideoItem.vue'

export default {
    name: 'PageDouyinAccount',
    components: { VideoItem },
    data() {
        return {
            isMobile: false,
            account: {},
            list: [],
            accountid: this.$route.params.id,
            articals: [],
            limit: 20,
            filter: '',
            accounttags: [],
            showModal: false,
            videoUrl: 'about:blank',
            showFavored: false
        }
    },
    mounted(){
        // this.loadModel(this.$route.params.id);
        this.$api.ui.pageBackBtn = () => {
            this.$router.push('/douyin/accounts');
        }
        this.getCurrentAccount()
        this.isMobile = this.$q.platform.is.mobile
    },
    methods: {
        getCurrentAccount(){
            this.$api.douyin.getAccounts( data => {
                let localAccounts = [...data]
                let account = localAccounts.filter( item => {
                    return item.caasid == this.$route.params.id
                })
                if( account.length ) {
                    this.account = account[0]
                    // this.getVideos()
                    this.$api.ui.pageTitle = this.account.name
                }
            }) 
        },
        getVideos(){
            let { userid, caasid } = this.account
            // this.$api.douyin.getVideos( {
            //     accountid: caasid, 
            //     page: 1, 
            //     limit
            // }, data => {
            //     this.list = [...data]
            // })
            this.$api.douyin.getVideos({
                accountid: caasid, 
                page: 1, 
                limit: this.limit,
                showFavored: this.showFavored
            }, data => {
                this.list = [...data]
                this.loading = false
            })
        },
        loadMoreVideos(page, done){
            console.log('loadmore:::', page )
            this.loading = true
            this.$api.douyin.getVideos({
                accountid: this.$route.params.id, 
                page, 
                limit: this.limit,
                showFavored: this.showFavored
            }, data => {
                this.list.push( ...data )
                this.loading = false
                this.page += 1
                done( data.length < this.limit )
            })
        },
        formatNumbers( num ){
          let number = num
          let showStr = ''
          if ( number > 9999  ){
              showStr = Math.floor(number / 10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
        },
        filterOnlyFavored( value ) {
            this.days = 0
            this.$refs.scroll.reset()
            this.list = []
            this.showFavored = value
            // this.getVideos()
            this.$refs.scroll.loadMore()
        }
    }
}
</script>

<style>
.preview_frame{
    width: 925px;
    overflow: hidden;
    height: 600px;
    margin-left: -275px;
}
.preview_frame iframe{
    background: #0E0F1A;
    border: none;
    height: 100%;
    width: 100%;
}
</style>